<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { useUserStore, useMenuStore } from '@/plugins/store'
import { login, LoginDto } from './api'

const router = useRouter()
const user = useUserStore()
const menu = useMenuStore()

const form = ref<FormInstance>()
const data = reactive<LoginDto>({ username: '', password: '' })

const rules = reactive<FormRules<LoginDto>>({
  username: { required: true, message: '请输入账号', trigger: 'blur' },
  password: { required: true, message: '请输入密码', trigger: 'blur' }
})

 const onLogin = async () => {
  await form.value?.validate()
  const res = await login(data)
  user.setToken(res.token)
  await menu.refresh()
  await user.getUser()
  router.push({ name: 'Home' })
}
</script>

<template>
  <div class="login">
    <img class="login-img" src="./images/login-img.png">
    <div class="login-right">
      <div class="login-box">
        <div class="login-logo">
          <img class="login-logo-img" src="./images/logo.svg" alt="">
        </div>
        <div class="login-title">欢迎使用悦客服系统管理平台</div>
        <div class="login-hello">用心用爱，悦来悦好</div>
        <ElForm ref="form" :model="data" :rules="rules">
          <ElFormItem prop="username">
            <ElInput v-model="data.username" placeholder="请输入账号" />
          </ElFormItem>
          <ElFormItem prop="password">
            <ElInput v-model="data.password" type="password" placeholder="请输入密码" />
          </ElFormItem>
          <ElFormItem style="margin-top: 40px;margin-bottom: 0;">
            <ElButton type="primary" @click="onLogin">登 录</ElButton>
          </ElFormItem>
        </ElForm>
      </div>

      <div class="login-text-box">
        <div class="login-text">Copyright © 2014-2018安徽悦来悦好电子商务有限公司 版权所有 皖ICP备17003083号</div>
        <div class="login-text">公司总部：中国·安徽 滁州市花园西路82号科创中心2号楼三楼 </div>
        <div class="login-text">全国统一服务热线：400-0550-681</div>
        <div class="login-text">江苏镧科技术有限公司技术支持 咨询热线：13160088870</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: stretch;
  background: #EBEEF4;
  &-img {
    height: 100%;
    flex-shrink: 0;
  }
  &-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
  }
  &-box {
    width: 400px;
  }
  &-logo {
    height: 32px;
    margin-bottom: 11vh;
  }
  &-logo-img {
    height: 32px;
  }
  &-hello {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 22px;
    color: #666666;
    margin-bottom: 13vh;
  }
  &-title {
    font-family: PingFangSC-SNaNpxibold;
    font-weight: 600;
    font-size: 28px;
    color: #333333;
    margin-top: 3px;
    border: none;
    margin-bottom: 1vh;
  }
  &-text-box {
    width: 466px;
    margin-left: 40px;
  }
  &-text {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
  }
  :deep(.el-input__inner) {
    height: 64px;
    border-radius: 4px;
    padding: 0 23px;
    &::placeholder {
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 16px;
      color: #999999;
    }
  }
  :deep(.el-input__wrapper) {
    padding: 0;
    box-shadow: none;
  }
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: none;
  }
  :deep(.el-form-item) {
    margin-bottom: 40px;
  }
  :deep(.el-button) {
    border-radius: 4px;
    height: 64px;
    width: 100%;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
  }
}
</style>
